<template>
	<view class="home">
		<view class="add" @click="add" v-show="type=='0'">
			<u-icon name="plus-circle" size="44" color="#2979ff"></u-icon>
		</view>
		<u-sticky offset-top="0">
			<u-subsection :list="list" :current="type" @change="click"></u-subsection>
		</u-sticky>

		<view class="content" v-if="type == '0'">
			<unicloud-db ref="photoUdb" v-slot:default="{data, pagination, loading, error, options}" collection="photo"
				orderby="createTime desc" field="title,url" :getone="false">
				<view v-if="error" class="error">{{error.message}}</view>
				<view v-else class="img-list">
					<view v-for="(item, index) in data" :key="index" class="img-list-item"
						@click="previewImg(data,item.url)">
						<image :src="item.url" mode="widthFix" style="width: 100%;"></image>
						<text class="title">{{item.title}}</text>
					</view>
				</view>
				<view v-if="loading" class="loading">加载中...</view>
			</unicloud-db>
		</view>


		<view class="content" v-if="type == '1'">
			<unicloud-db ref="videoUdb" v-slot:default="{data, pagination, loading, error, options}" collection="video"
				orderby="createTime desc" field="title,url" :getone="false">
				<view v-if="error" class="error">{{error.message}}</view>
				<view v-else class="video-list">
					<view v-for="(item, index) in data" :key="index" class="video-list-item">
						<text class="title">{{item.title}}</text>
						<video :src="item.url" embed :title="item.title" poster="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e68eaaa2-0890-4bea-8832-64ef780a0817/b11d3529-a2d6-4623-bf87-826997dc210e.png"></video>
					</view>
				</view>
				<view v-if="loading" class="loading">加载中...</view>
			</unicloud-db>
		</view>




		<u-popup :show="show" @close="popup_close" round="50">
			<view class="popup">
				<u--form labelPosition="left" :model="upload" :rules="rules" labelWidth="100" ref="uForm" borderBottom>
					<u-form-item label="上传类型" prop="type">
						<u-radio-group v-model="upload.type">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in list" :key="index"
								:label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="上传标题" prop="title">
						<u--input v-model="upload.title" border="none" placeholder="请输入标题"></u--input>
					</u-form-item>
					<u-form-item :label="'上传'+upload.type" prop="url">
						<view v-if="upload.type === '照片'">
							<u-icon v-if="!upload.url" name="camera" size="44" @click="upload_handler('image')">
							</u-icon>
							<image v-else :src="upload.url" mode="widthFix" style="width: 100rpx;"></image>
						</view>
						<view v-else>
							<u-icon v-if="!upload.url" name="plus-circle" size="44" @click="upload_handler('video')">
							</u-icon>
							<video v-else :src="upload.url" enable-danmu danmu-btn controls
								style="width:300rpx;height: 150rpx;"></video>
						</view>
					</u-form-item>
					<u-button type="primary" style="margin-top: 50rpx;" @click="submit">提交</u-button>
				</u--form>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				upload: {
					type: '照片',
					url: '',
					title: ''
				},
				show: false,
				list: [{
					name: '照片'
				}, {
					name: '视频'
				}],
				rules: {
					'radio': {
						type: 'string',
						required: true,
						message: '请选择上传类型',
						trigger: ['blur', 'change']
					},
					'title': {
						type: 'string',
						required: true,
						message: '请输入标题',
						trigger: ['blur', 'change']
					},
					'url': {
						type: 'string',
						required: true,
						message: '请上传',
						trigger: ['blur', 'change']
					}
				},
			}
		},
		onPullDownRefresh() {
			this.refresh();
		},
		onReachBottom() {
			if (this.type == '0') {
				this.$refs.photoUdb.loadMore()
			} else {
				this.$refs.videoUdb.loadMore()
			}
		},
		methods: {
			refresh() {
				if (this.type == '0') {
					this.$refs.photoUdb.loadData({
						clear: true
					}, () => {
						uni.stopPullDownRefresh()
					})
				} else {
					this.$refs.videoUdb.loadData({
						clear: true
					}, () => {
						uni.stopPullDownRefresh()
					})
				}
			},
			popup_close() {
				this.upload.url = "";
				this.upload.title = "";
				this.show = false;
			},
			previewImg(data, url) {
				uni.previewImage({
					urls: data.map(item => item.url),
					current: url,
					indicator: 'number'
				})
			},
			click(item) {
				this.type = item;
			},
			add() {
				this.show = true;
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					const db = uniCloud.database({})
					if (this.type == '0') {
						db.collection('photo').add({
							title: this.upload.title,
							url: this.upload.url
						}).then(res => {
							if (res.result.code == 0) {
								this.upload.url = '';
								this.upload.title = '';
								this.show = false;
								this.refresh()
							}
						})
					} else {
						db.collection('video').add({
							title: this.upload.title,
							url: this.upload.url
						}).then(res => {
							if (res.result.code == 0) {
								this.upload.url = '';
								this.upload.title = '';
								this.show = false;
								this.refresh()
							}
						})
					}
				}).catch(errors => {})
			},
			upload_handler(type) {
				uniCloud.chooseAndUploadFile({
						type,
						count:1,
						
					})
					.then(res => {
						this.upload.url = res.tempFiles[0].url
					});

			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		box-sizing: border-box;

		.add {
			position: fixed;
			right: 20rpx;
			bottom: 100rpx;
			z-index: 9999;
			padding: 20rpx;
			border-radius: 6rpx;
			background-color: rgba(0, 0, 0, .1);

			&:active {
				background-color: rgba(0, 0, 0, .7);
			}
		}

		.popup {
			padding: 25rpx;
			background-color: #fff;
			box-sizing: border-box;
			width: 100%;
			height: 600rpx;
		}

		.img-list {
			column-count: 2;
			column-gap: 30rpx;

			.img-list-item {
				break-inside: avoid;
				margin-bottom: 20rpx;
				background-color: #F2F2F2
			}
		}

		.video-list {
			width: 100%;

			.video-list-item {
				width: 100%;
				margin-top: 30rpx;

				video {
					width: 100%;
				}
			}
		}

		.title {
			display: flex;
			justify-content: center;
			padding: 15rpx 0;
			background-color: #f2f2f2;
		}

		.content {
			margin-top: 30rpx;
		}
	}
</style>
